<template>
  <view class="by-draw-bottom" :class="{show:modelValue}" @touchmove.stop.prevent>
    <view class="mask" @click="close"/>

    <view class="content width-full over-hidden bg-white" :class="{show:modelValue}">
      <slot>
        <by-view v-for="(item,index) in list" :key="index" @click="$emit('click', { item, index })">
          <view class="menu-item flex-row flex-center">
            <text class="text-30 color-t1">{{item.text}}</text>
          </view>
        </by-view>
        <by-view @click="close">
          <view class="menu-item flex-row flex-center no-border">
            <text class="text-30 color-t1">取消</text>
          </view>
        </by-view>
      </slot>

      <by-safe-area-bottom v-if="showSafeBottom" />
    </view>
  </view>
</template>

<script setup lang="ts">
import type { AnyObject } from '@/common/types'

interface IProps{
  modelValue: boolean
  showSafeBottom: boolean
  watchBack: boolean
  list: Array<AnyObject>,
  radius?: string
}

const props = withDefaults(defineProps<IProps>(), {
  modelValue: false,
  showSafeBottom: true,
  watchBack: false,
  list: () => []
})

const $emit = defineEmits(['update:modelValue', 'close', 'click'])

if (props.watchBack) {
  onBackPress(() => {
    if (props.modelValue) {
      close()
      return true
    }
  })
}

function close() {
  $emit('update:modelValue', false)
  $emit('close')
}
</script>

<style scoped lang="scss">
.by-draw-bottom{
  @include position(fixed, 0, 0, 0, 0, 200);
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease-in-out;

  &.show{
    opacity: 1;
    visibility: visible;
  }

  .mask{
    @include position(absolute, 0, 0, 0, 0);
    background: $color-bg-mask;
  }

  .content{
    @include position(absolute, $left: 0, $bottom: 0, $z-index:2);
    border-radius: 16rpx 16rpx 0 0;
    transform: translateY(100%);
    transition: all .3s ease-in-out;

    &.show{
      transform: translateY(0);
    }

    .menu-item{
      height: 118rpx;
      border-bottom:2rpx solid #ececec;

      &.no-border{
        border:none;
      }

    }

  }

}
</style>
